import React, { useEffect, useState } from 'react';
import { Button, Card, Row, Col, Table, Steps, Radio, Input ,Modal,Form} from 'antd';
import { useLocation } from 'umi';
import type { RadioChangeEvent } from 'antd';
import { basicInformation } from '../enum';


// const description = 'You can hover on the dot.';
const { Step } = Steps;
const { TextArea } = Input;

const scrollToAnchor = (anchorName: any) => {
  if (anchorName) {
    // 找到锚点
    const anchorElement = document.getElementById(anchorName);
    // 如果对应id的锚点存在，就跳转到锚点
    if (anchorElement) {
      anchorElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
    }
  }
};



export default function detail () {

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  const [isModalOpen3, setIsModalOpen3] = useState(false);

const showModal = () => {
  setIsModalOpen(true);
};

const handleOk = () => {
  setIsModalOpen(false);
};

const handleCancel = () => {
  setIsModalOpen(false);
};

const showModal2 = () => {
  setIsModalOpen2(true);
};

const handleOk2 = () => {
  setIsModalOpen2(false);
};

const handleCancel2 = () => {
  setIsModalOpen2(false);
};

const showModal3 = () => {
  setIsModalOpen3(true);
};

const handleOk3 = () => {
  setIsModalOpen3(false);
};

const handleCancel3 = () => {
  setIsModalOpen3(false);
};

const columns1: any = [
  {
    title: '类型',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '补贴规则编号',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '适用订单类型',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '考核期开始时间',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '考核期结束时间',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '本期考核起始时间',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '本期考核结束时间',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '本期考核期结束是否在租',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '安全奖是否达标',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '是否无欠租',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '欠租金额',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '是否无违章',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '未处理违章扣分',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '是否无出险',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'X月出险次数',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '是否提前完成年检',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '冲单奖是否达标',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'X月日均完单量',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'X月月完单量',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'X月日均TSH',
    dataIndex: 'address',
    key: 'address',
  },
    {
    title: 'X月月TSH',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'X月日均高峰TSH',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'X月月高峰TSH',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '合规是否达标',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '合规是否达标',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '是否有认证',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'X月是否符合奖励发放',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '奖励发放方式',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '天数',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '金额',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '实物类型',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '实物名称',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '发放月份',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '备注',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '发放状态',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '审核记录',
    dataIndex: 'address',
    key: 'address',
    render:()=>(
      <div>
        <Button type='link' onClick={showModal}>查看</Button>
        <Modal
          title="审核记录"
          width="900px"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Steps current={1}>
            <Step title="Finished" description="You can hover on the dot." />
            <Step title="In Progress" description="You can hover on the dot." />
            <Step title="Waiting" description="You can hover on the dot." />
            <Step title="Waiting" description="You can hover on the dot." />
          </Steps>
        </Modal>
      </div>
    )
  },
  {
    title: '补扣费审核记录',
    dataIndex: 'address',
    key: 'address',
    render:()=>(
      <div>
        <Button type='link' onClick={showModal2}>查看</Button>
        <Modal
          title="补扣费审核记录"
          width="400px"
          open={isModalOpen2}
          onOk={handleOk2}
          onCancel={handleCancel2}
        >
          <div>
            <div style={{display:'flex',justifyContent:'space-between'}}>
              <p>操作时间：2022-11-23 23:12:12</p>
              <p>操作人：张三</p>
            </div>
            <p>处理状态：审核通过</p>
            <p>处理意见：同意</p>
          </div>
        </Modal>
      </div>
    )
  },
];

const columns2:any[] = [
  {
    title: '操作人',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作内容',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作时间',
    dataIndex: 'address',
    key: 'address',
  },
]


  const data1: any = [];

  const [isDetail, setIsDetail] = useState(true);
  const [isbuttoningAudit, setIsButtoningAudit] = useState(false)

  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  const location: any = useLocation();

  useEffect(() => {
    if (location?.query?.type === 'audit') {
      setIsDetail(false);
    }
    if (location?.query?.type === 'buttoningAudit') {
      setIsButtoningAudit(true);
    }
  }, [location]);

  const onFinishModal = () => {};

  return (
    <div style={isDetail?{ paddingTop: '80px' }:{}}>
      {isDetail ? (
        <div
          style={{
            position: 'fixed',
            top: '125px',
            width: '80%',
            zIndex: 999,
            height: '80px',
            lineHeight: '80px',
          }}
        >
          <Row style={{ textAlign: 'center' }}>
            <Col span={4}>
              <Button
                onClick={() => {
                  scrollToAnchor('基础信息');
                }}
              >
                基础信息
              </Button>
            </Col>
            <Col span={4}>
              <Button
                onClick={() => {
                  scrollToAnchor('奖励明细');
                }}
              >
                奖励明细
              </Button>
            </Col>
            <Col span={4}>
              <Button
                onClick={() => {
                  scrollToAnchor('操作记录');
                }}
              >
                操作记录
              </Button>
            </Col>
          </Row>
        </div>
      ) : (
        <></>
      )}

      {!isDetail ? (
        <Card id="审批信息" title="审批信息" bordered={false}>
          <Steps current={1}>
            <Step title="Finished" description="You can hover on the dot." />
            <Step title="In Progress" description="You can hover on the dot." />
            <Step title="Waiting" description="You can hover on the dot." />
            <Step title="Waiting" description="You can hover on the dot." />
          </Steps>
        </Card>
      ) : (
        <></>
      )}

      {!isDetail ? (
        <Card id="审批" title="审批" bordered={false}>
          <Row>
            <Col style={{ marginLeft: '50px' }} span={2}>
              审核状态：
            </Col>
            <Col>
              <Radio.Group onChange={onChange} value={value}>
                <Radio value={1}>审核通过</Radio>
                <Radio value={2}>审核驳回</Radio>
              </Radio.Group>
            </Col>
          </Row>
          <Row style={{ marginTop: '15px' }}>
            <Col style={{ marginLeft: '50px' }} span={2}>
              处理意见：
            </Col>
            <Col span={7}>
              <TextArea
                placeholder="Autosize height with minimum and maximum number of lines"
                autoSize={{ minRows: 2, maxRows: 6 }}
              />
            </Col>
          </Row>
        </Card>
      ) : (
        <></>
      )}

      <Card id="基础信息" title="基础信息" bordered={false}>
        <Row>
          {Object.keys(basicInformation).map(item=>(
            <Col style={{marginTop:'15px',marginLeft:'150px'}} span={9}>{`${item} : ${basicInformation[item] || 'xxx'}`}</Col>
          ))}
          
        </Row>
      </Card>

      <Card id="奖励明细" title="奖励明细" bordered={false}>
        <Table scroll={{x:6000}} columns={columns1} dataSource={[{}]} />
      </Card>

      <Card id="操作记录" title="操作记录" bordered={false}>
        <Table columns={columns2} dataSource={data1} />
      </Card>

      {!isDetail ? (
        <Card style={{ textAlign: 'center' }} bordered={false}>
          <Button style={{ marginRight: '25px' }}>提交</Button>
          <Button style={{ marginLeft: '25px' }}>取消</Button>
        </Card>
      ) : (
        <></>
      )}
      {isbuttoningAudit? (
                <Card style={{ textAlign: 'center' }} bordered={false}>
                <Button style={{ marginRight: '25px' }} onClick={()=>{showModal3()}}>补扣费审核</Button>
                <Button style={{ marginLeft: '25px' }}>取消</Button>
              </Card>
      ):<></>}
      <Modal
          title="Basic Modal"
          width="400px"
          open={isModalOpen3}
          onOk={handleOk3}
          onCancel={handleCancel3}
        >
          <Form name="basic" onFinish={onFinishModal} autoComplete="off">
            <Form.Item
              label="审批状态"
              name="username"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Radio.Group>
                <Radio value="apple"> 审批通过 </Radio>
                <Radio value="pear"> 审批驳回 </Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label="处理意见" name="password">
              <Input />
            </Form.Item>

            <Form.Item style={{textAlign:'right'}}>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
    </div>
  );
}
